<template>
  <div class="notification">
    <div class="head header">
      <div class="head_left">
        <router-link :to="{name: 'inform-list', query: {type: types[this.$route.query.emailType]}}">
          <el-button plain icon="el-icon-back" size="small" :round="true">
            返回
          </el-button>
        </router-link>
        <p class="title">{{tagEmu[this.$route.query.tag]}}</p>
        <span class="desc"></span>
      </div>
      <div class="button_list">
        <router-link :to="{name: 'inform-template-add', query: this.$route.query}">
        <el-button type="primary">新增邮件模板</el-button>
        </router-link>
      </div>
    </div>
    <div class="template">
      <div class="ant-radio-group ant-radio-group-outline" style="display: flex; flex-wrap: wrap; width: 100%;">
        <div class="template_item"  v-for="(item, index) in templateList" :key="index">
          <p class="title">{{item.emailModelName}}</p>
          <div class="img_more"
               :style="{backgroundImage:`url('${bagEmu[item.noticeCode]}')`}"></div>
          <label class="ant-radio-wrapper">
            <div class="address-m-list_inner_default_item">
              <input type="radio" :checked="item.emailDefaultState === checkedValue"  @change="setDefault(item)">
              设为默认发送模板
            </div>
          </label>
          <div class="button__wrap">
            <el-button type="danger" style="min-width: 90px;" v-if="item.emailModelType === '1' " @click="handleDel(item.id)"><span>删 除</span></el-button>
            <el-button style="min-width: 90px;" v-if="item.emailModelType === '1'" @click="handleEdit(item.id)"><span>编 辑</span></el-button>
            <el-button type="primary" style="min-width: 90px;" @click.stop="handlePrew(item.emailModelSourceCode)"><span>预 览</span></el-button>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="isOpen" title="" :append-to-body="true"  class="custom-url" @close="isOpen=false">
      <iframe :srcdoc="showTemplateContent" frameborder="0" width="100%" height="600px"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import {getEmailModesPage, getDetailEmailModels, deleteEmailModels, setDefaultEmailModels} from '@/api/inform';
import orderPng1 from '@/assets/images/663f622862bfbe5368b80f341ef683e7.png';
import orderPng2 from '@/assets/images/15fa4670c01a0d3267e8e898537496e4.png';
import orderPng3 from '@/assets/images/cd8d9857582f038af29fa5e7027c3928.png';
export default {
    name: 'template-list',
    data () {
        return {
            checkedValue: '0',
            tagEmu: {
                order_confirm: '订单提交模板管理',
                order_send_goods: '发货通知模板管理',
                order_confirm_goods: '收货通知模板管理',
                member_reset_password: '重设会员密码模板管理',
                marketing_return: '放弃订单挽留模板管理',
                marketing_activity: '放弃订单挽留模板管理'
            },
            bagEmu: {
                order_confirm: orderPng1,
                order_send_goods: orderPng2,
                order_confirm_goods: orderPng3,
                member_reset_password: 'https://cdn.shoplazzay.com/1711759867510a55n4s.png',
                marketing_return: 'https://cdn.shoplazzay.com/17117602853934jyleb.png',
                marketing_activity: 'https://cdn.shoplazzay.com/17117602853934jyleb.png'
            },
            types: {
                1: 'order',
                2: 'member',
                3: 'marketing'
            },
            templateList: [],
            isOpen: false,
            showTemplateContent: ''
        };
    },
    computed: {
        siteId () {
            return this.$store.state.user.siteId;
        }
    },
    mounted () {
        this.initList();
    },
    methods: {
        initList () {
            getEmailModesPage({siteId: this.siteId, ...this.$route.query, page: 1, pageSize: 50}).then(res => {
                this.templateList = res.data.records;
            });
        },
        handleDetail (id) {
            getDetailEmailModels(this.siteId, id);
        },
        handleEdit (id) {
            this.$router.push({name: 'inform-template-edit', params: {id}, query: this.$route.query});
        },
        handleDel (id) {
            this.$confirm('确认删除该模板?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteEmailModels(this.siteId, id).then(res => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.initList();
                });
            }).catch(() => {
            });
        },
        setDefault (item) {
            setDefaultEmailModels({siteId: this.siteId, modelId: item.id}).then(res => {
                this.$message.success('设置成功');
                this.initList();
            });
            console.log(item);
        },
        handlePrew (code) {
            this.isOpen = true;
            this.showTemplateContent = '';
            setTimeout(() => { this.showTemplateContent = code; }, 1200);
        }
    }
};
</script>

<style scoped lang="scss">
.notification {
  .header {
    padding: 20px 0;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .head_left{
      display: flex;
      align-items: center;
    }
    .title{
      margin-left: 6px;
    }
  }

  .template {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
    padding: 30px 40px;

    .template_item {
      width: 30%;
      margin-bottom: 70px;
      margin-right: 5%;
      position: relative;
      border-radius: 8px 8px 0 0;

      &:nth-child(3n) {
        margin-right: 0;
      }

      .title {
        font-size: 16px;
        color: #212121;
        margin-bottom: 10px;
      }

      .desc {
        font-size: 14px;
        color: #8c8c8c;
        line-height: 24px;
        margin-bottom: 15px;
        min-height: 48px;
      }

      .img_more {
        width: 100%;
        margin-bottom: 20px;
        border-radius: 2px;
        min-width: 100%;
        padding-bottom: 76%;
        box-shadow: 0 0 5px #ddd;
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: left top;
      }

      .button__wrap {
        display: none;
        width: 100%;
        position: absolute;
        top: 50%;
        justify-content: space-around;
      }

      &:hover .button__wrap {
        display: flex;
      }
    }
  }
}
</style>
